<template>
    <div id="team-earnings">
      <scroller lock-x scrollbar-y use-pullup  @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
        <div class="box2">
          <team-rank></team-rank>
          <div class="circle"></div>
          <h5>我的团队({{person}}人)</h5>
          <x-table :cell-bordered="false" v-if="person !== 0">
            <thead>
              <tr>
                <th>用户名</th>
                <th>本月收益 (元)</th>
                <th>上月收益 (元)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in teamList" :key="index">
                <td>{{item.userName}}</td>
                <td>{{item.currentMonthIncome  | fixed}}</td>
                <td>{{item.lastMonthIncome  | fixed}}</td>
              </tr>
            </tbody>
          </x-table>
         </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
          </div>
        </scroller>
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import TeamRank from './TeamRank'
import { XTable, Scroller, Spinner } from 'vux'
import api from '../../api'
import utils from '../../utils'
export default {
  data () {
    return {
      teamList: [],
      person: '',
      tokenval: '',
      PageNum: 100, // 记录每页数
      count: 1,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    XTable,
    TeamRank,
    Scroller,
    Spinner
  },
  created () {
    window.document.title = '团队收益'
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    this.loadmore(this.PageNum)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (index) {
      this.teamList = []
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: index
      }
      api.teamdetail(params).then(res => {
        console.log(res, 2)
        if (res.status === '200') {
          this.person = res.data.cnt
          this.teamList = res.data.list
        }
      })
    }
  }
}
</script>

